<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>
            <img :src="imagUrlArray[index]" alt="" width="50" height="50">
        </div>
        <div>

            <button @click="nextPage">下一页</button>
            <button @click="lastPage">上一页</button>

        </div>


    </div>

</body>
<script src="./js/vue2.7.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: 'hello',
            imagUrlArray: ['./img/1.png', './img/2.png', './img/3.png'],
            index: 0
        },
        methods: {
            nextPage() {
                if (this.index == 2) {
                    this.index = 0;
                } else {
                    this.index++;
                }

            },
            lastPage() {
                if (this.index == 0) {
                    this.index = 2;
                } else {
                    this.index--;
                }
            }
        }



    });
</script>

</html>